<template>
	<view class="message">
		<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/Group 11872@2x.png" class="messageback"
			mode="widthFix"></image>
		<view class="headertop" :style="{'background':back1}">
			<view class="topdaohang" :style="{'margin-top':statusBarHeight+'px','height':barHeight+'px'}">
				<span>企址易</span>
			</view>
		</view>
		<view :style="{'margin-top':statusBarHeight+'px','height':barHeight+'px'}"></view>
		<view class="wztitle">
			<view class="t1">
				实时通知不错过
			</view>
			<view class="t2">
				所有提醒统一收纳，工作更轻松
			</view>
		</view>
		<view class="bottomcontent">
			<image
				:src="active==0?'https://jingwei.xunfuzhifuzaixian.com/static/images/Group 11873@2x.png':'https://jingwei.xunfuzhifuzaixian.com/static/images/Group 11875@2x.png'"
				class="bcback" mode=""></image>
			<view class="tabqiehuan">
				<view :class="active==0?'itemtab activeColor':'itemtab'" :style="{'margin-top':active==1?'8rpx':'0rpx'}"
					@click="active=0">
					<span>客户动态</span>
					<view class="activebox" v-if="active==0">

					</view>
				</view>
				<view :class="active==1?'itemtab activeColor':'itemtab'" :style="{'margin-top':active==0?'8rpx':'0rpx'}"
					@click="active=1">
					<span>系统通知</span>
					<view class="activebox" v-if="active==1">

					</view>
				</view>
			</view>
			<view class="msgicon" v-if="!list.length">
				<image :src="_static('https://jingwei.xunfuzhifuzaixian.com/static/images/wxnone.png')" mode="widthFix">
				</image>
				<view class="msgtext">
					暂无内容
				</view>
			</view>
			<view class="contentList1" v-if="active==1">
				<view class="xtitem" v-for="(item,index) in  list" :key="index" @click="gopage(item)">
					<view class="topxtline">
						<view class="xttext">
							{{item.title}}
							<view class="redc" v-if="item.is_show!=1">

							</view>
						</view>
						<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/微信图片_20250804140808.png"
							class="rightarrow" mode=""></image>
					</view>
					<view class="tts">
						{{item.detail}}
					</view>
				</view>
			</view>
			<view class="contentList" v-if="active==0">

				<view class="itemboxx" v-for="(item,index) in  list" :key="index" @click="gopage(item)">
					<view class="topline">
						<view class="leftbox">
							<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/微信图片_20250804134233.png"
								mode=""></image>
							<view class="yxtext">{{item.title}}</view>
							<view class="reduc" v-if="item.is_show!=1">

							</view>
						</view>
						<view class="rightxk">
							{{item['memo']}}
						</view>
					</view>
					<view class="centernr">
						<view class="ll">
							<view class="fc">
								{{item['product']}}
							</view>
							<view class="tt">
								{{item['company']}}
							</view>
						</view>
						<view class="ll1">
							<view class="tt">
								联系人：<span style="color: #4E5969;">{{item['username']}}</span>
							</view>
							<view class="tt">
								联系电话：<span style="color: #4E5969;">{{item['telphone']}}</span>
							</view>
						</view>
						<view class="ll2">
							下次跟进时间:<span style="color: #4E5969;">{{item['nexttime']}}</span>
						</view>
						<view class="ll2">
							创建时间:<span style="color: #4E5969;">{{formatDate(item['createtime']*1000)}}</span>
						</view>
						<view class="bottomdt">
							<view class="leftt">
								<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/微信图片_20250804140025.png"
									mode=""></image>
								<span>{{item['memo']}}</span>
							</view>
							<view class="rightt">
								<span>详情</span>
								<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/微信图片_20250804140808.png"
									mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 200rpx;">

		</view>
		<Tabbar page="/pages/Message/index"></Tabbar>
		<drag-button :isDock="true" :existTabBar="true" />
	</view>
</template>
<script setup>
	import dragButton from "@/components/drag-button/drag-button.vue";
	import {
		_static
	} from '@/ulm/utils/url.js'
	import Tabbar from '@/components/tabbar.vue'
	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
	import ulm, {
		$api
	} from '@/ulm';
	import {
		ref,
		onMounted,
		reactive,
		watch
	} from 'vue'
	const statusBarHeight = ref('')
	const active = ref(0)
	const list = ref([])
	const query = reactive({
		page: 1,
		limit: 10
	})
	const back1 = ref('')
	const barHeight = ref('')
	const total = ref(0)
	watch(() => active.value, (xin, jiu) => {
		list.value = []
		query['page'] = 1
		if (xin == 0) {
			dongtaimsg()
		} else {
			initlist()
		}
	})


	onPullDownRefresh(() => {
		console.log('下拉刷新触发');
		query['page'] = 1
		list.value = []
		if (active.value == 0) {
			dongtaimsg()
		} else {
			initlist()
		}
		setTimeout(() => {
			// 数据加载完成后停止刷新
			uni.stopPullDownRefresh();
			console.log('刷新完成');
		}, 1000);
	})
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#CAEEFF'
		} else {
			back1.value = ''
		}
	})
	onShow(() => {
		list.value = []
		query['page'] = 1
		if (active.value == 0) {
			dongtaimsg()
		} else {
			initlist()
		}
	})
	onReachBottom(() => {
		if (total.value > list.value.length) {
			query['page']++
			initlist()
		}
	})
	async function dongtaimsg() {
		const res = await $api.kehumsg(query)
		if (res.code == 1) {
			list.value.push(...res.data.list)
			total.value = res.data.count
		}
	}
	async function initlist() {
		const res = await $api.msglist(query)
		if (res.code == 1) {
			list.value.push(...res.data.list)
			total.value = res.data.count
		}
	}

	function gopage(item) {

		if (active.value == 0) {
			if (item['show'] == 2) {
				uni.showToast({
					title: '您已退出合作暂不能查看',
					icon: 'none'
				})
				return
			}
			uni.navigateTo({
				url: '/sub_TouristSource/index/kehudetail?id=' + item.kid
			})
		} else {
			uni.navigateTo({
				url: '/sub_index/index/Messagedetail?id=' + item.id
			})
		}

	}

	function statustext(num) {
		if (num == 1) {
			return '新客'
		} else if (num == 2) {
			return '常态跟进'
		} else if (num == 3) {
			return '签订意向协议'
		} else if (num == 4) {
			return '缴纳定金'
		} else if (num == 5) {
			return '签订合同'
		} else if (num == 6) {
			return '缴纳首付款'
		} else if (num == 7) {
			return '缴纳尾款'
		} else if (num == 8) {
			return '已成交'
		} else if (num == 9) {
			return '无效'
		}

	}
	//时间戳13位
	function formatDate(time) { //时间戳转日期
		let date = new Date(time);
		let y = date.getFullYear();
		let MM = date.getMonth() + 1;
		MM = MM < 10 ? ('0' + MM) : MM;
		let d = date.getDate();
		d = d < 10 ? ('0' + d) : d;
		let h = date.getHours();
		h = h < 10 ? ('0' + h) : h;
		let m = date.getMinutes();
		m = m < 10 ? ('0' + m) : m;
		let s = date.getSeconds();
		s = s < 10 ? ('0' + s) : s;
		return y + '-' + MM + '-' + d + ' ' + h + ':' + m

	}
</script>

<style lang="scss">
	.msgicon {
		width: 608rpx;
		margin: 100rpx auto;
		overflow: hidden;

		.msgtext {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #86909C;
			text-align: center;
			width: 100%;
			margin-top: 30rpx;
		}

		image {
			width: 608rpx;
		}
	}

	page {
		background: #F2F3F5;
	}

	.message {
		width: 100%;
		overflow: hidden;
		position: relative;

		.messageback {
			width: 100%;
			position: absolute;
		}

		.bottomcontent {
			width: 100%;
			overflow: hidden;
			margin-top: 24rpx;
			position: relative;

			.bcback {
				width: 100%;
				height: 1308rpx;
				position: absolute;
				z-index: -1;
			}

			.contentList1 {
				width: 686rpx;
				margin: auto;
				margin-top: 40rpx;
				overflow: hidden;

				.xtitem {
					width: 100%;
					background: #FFFFFF;
					box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.02);
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					overflow: hidden;
					margin-bottom: 28rpx;

					.tts {
						width: 638rpx;
						margin: auto;
						padding: 28rpx 0;
						overflow: hidden;
						font-size: 28rpx;
						color: #4E5969;
					}

					.topxtline {
						width: 638rpx;
						margin: auto;
						height: 84rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-bottom: 2rpx solid #F7F8FA;

						.rightarrow {
							width: 28rpx;
							height: 28rpx;
						}

						.xttext {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 32rpx;
							color: #1D2129;
							display: flex;
							align-items: center;

							.redc {
								width: 12rpx;
								height: 12rpx;
								background: #F53F3F;
								border-radius: 50%;
								margin-left: 16rpx;
							}
						}
					}
				}
			}

			.contentList {
				width: 686rpx;
				margin: auto;
				margin-top: 40rpx;
				overflow: hidden;

				.itemboxx {
					width: 686rpx;
					background: #FFFFFF;
					overflow: hidden;
					box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.02);
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					margin-bottom: 28rpx;

					.centernr {
						width: 638rpx;
						margin: auto;

						.bottomdt {
							width: 100%;
							height: 76rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 24rpx;
							border-top: 2rpx solid #F7F8FA;

							.rightt {
								display: flex;
								align-items: center;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #4E5969;

								image {
									width: 28rpx;
									height: 28rpx;
								}
							}

							.leftt {
								display: flex;
								align-items: center;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 26rpx;
								color: #FF7D00;

								image {
									width: 25rpx;
									height: 28rpx;
									margin-right: 8rpx;
								}
							}

						}

						.ll2 {
							width: 100%;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #1D2129;
							margin-top: 20rpx;
						}

						.ll1 {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 24rpx;

							.tt {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #1D2129;
							}
						}

						.ll {
							width: 100%;
							display: flex;
							align-items: center;
							margin-top: 16rpx;

							.fc {
								min-width: 76rpx;
								min-height: 40rpx;
								background: #F7F8FA;
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								text-align: center;
								line-height: 40rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 24rpx;
								color: #4E5969;
							}


							.tt {
								max-width: 500rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								font-size: 28rpx;
								margin-left: 8rpx;
								color: #1D2129;
							}
						}
					}

					.topline {
						width: 100%;
						height: 72rpx;
						background: linear-gradient(90deg, #D8F2FF 0%, rgba(216, 242, 255, 0.06) 100%);
						overflow: hidden;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.leftbox {
							display: flex;
							align-items: center;
							margin-left: 26rpx;

							image {
								width: 31rpx;
								height: 31rpx;
							}

							.yxtext {
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								font-size: 30rpx;
								color: #0B5FA9;
								margin-left: 10rpx;
							}

							.reduc {
								width: 12rpx;
								height: 12rpx;
								background: #F53F3F;
								border-radius: 50%;
								margin-left: 16rpx;
							}
						}

						.rightxk {
							padding: 0 10rpx;
							height: 52rpx;
							background: #FF7D00;
							box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(255, 125, 0, 0.42);
							border-radius: 26rpx 0rpx 0rpx 26rpx;
							text-align: center;
							line-height: 52rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #FFFFFF;
						}
					}
				}
			}

			.tabqiehuan {
				width: 100%;
				margin-top: 44rpx;
				display: flex;

				.activeColor {
					color: #23ACED !important;
				}

				.itemtab {
					width: 50%;
					font-family: PingFang SC, PingFang SC;
					font-size: 32rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					color: #FFFFFF;

					.activebox {
						width: 48rpx;
						height: 4rpx;
						background: #23ACED;
						border-radius: 2rpx 2rpx 2rpx 2rpx;
						margin-top: 8rpx;
					}
				}
			}
		}

		.wztitle {
			width: 100%;
			overflow: hidden;
			margin-top: 34rpx;

			.t1 {
				font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
				font-weight: bold;
				font-size: 40rpx;
				color: #0B5FA9;
				margin-top: 34rpx;
				margin-left: 32rpx;
			}

			.t2 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #4E5969;
				margin-top: 16rpx;
				margin-left: 32rpx;
			}
		}

		.headertop {
			width: 100%;
			position: fixed;
			top: 0%;
			overflow: hidden;
			transition: 0.5s;
			z-index: 9999;

			.topdaohang {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 34rpx;
				color: #FFFFFF;
			}
		}
	}
</style>